{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>资讯详情</title>
<style type="text/css">
    .mui-content{background-color: #fff; padding: 12px 0;}
    .xw-border-top{ position: fixed;}
    .mui-pull-right .bbs-replay-more{ color: #999;}
    body{margin-bottom: 4%;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <!--资讯标题-->
    <h4 class="mb-info-tit">{{data.title}}</h4>
    <div class="mb-comment-nick bbs-comment-nick xw-border-bottom">
        <img class="mb-userphoto mui-pull-left" src="{{ctx.app.config.api.image}}/{{data.headImgUrl}}"/>
        <div class="mb-nick-name mui-pull-left">
            <b class="mb-nickname mui-ellipsis">{{data.name}}</b>
            <p class="mb-arr-time">{{data.createDate}}</p>
        </div>
        <div class="mui-pull-right">
            {%if data.collectionId == ''%}
            <a class="bbs-replay-more" href="javascript:void(0);"><i data-id="{{data.id}}" onclick="js_yes(this)" class="iconfont icon-shoucang"></i></a>
            {%else%}
            <a class="bbs-replay-more"  href="javascript:void(0);"><i data-id="{{data.collectionId}}" data-cid="{{data.collectionId}}" style="color:red;" onclick="js_del(this)" class="iconfont icon-yishoucang"></i></a>
            {%endif%}
        </div>
    </div>
    <!--资讯详情-->
    <div class="mb-cont bbs-cont" style="word-break:break-all;">
        　　{{data.content}}
        <br />
        {%for item in data.images%}
        <img src="{{ctx.app.config.api.image}}/{{item}}"/>
        {%endfor%}
    </div>
    <!--评论列表-->
    <div id="list_box"class="mb-comment nobd-comment">
        <!--评论循环主体开始-->
        {% for item in comment.list%}
        <div class="mb-comment-list xw-border-bottom">
            <div class="mb-comment-nick mui-clearfix">
                <img class="mb-userphoto mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.headImgUrl}}"/>
                <div class="mb-nick-name mui-pull-left">
                    <b class="mb-nickname mui-ellipsis">{{item.name}}</b>
                    <p class="mb-arr-time">{{item.createDate}}</p>
                </div>
                {%if item.likeId%}
                <a class="mui-pull-right bbs-zan" style="color:#ff6f3b" href="javascript:void(0);" onclick="js_commentnozan(this)" data-id="{{item.likeId}}"><i class="iconfont icon-zan"></i> {{item.postLikeCount}}</a>
                {%else%}
                <a class="mui-pull-right bbs-zan" href="javascript:void(0);" onclick="js_commentzan(this)" data-id="{{item.id}}"><i class="iconfont icon-zan"></i> {{item.postLikeCount}}</a>
                {%endif%}
            </div>
            <div class="mb-comment-cont">
                <a href="javascript:void(0);" onclick="js_button(this)" data-name="{{item.name}}" data-id="{{item.id}}" data-cid="{{item.objectId}}" data-type="{{item.roleType}}">{{item.content}}</a>
                {%if item.topicCount >0 %}
                <a class="mb-replay-more" href="postreplaylist?id={{item.id}}">查看{{item.topicCount}}条回复</a>
                {%endif%}
            </div>
        </div>
        {% endfor %}
        <div  style="margin-bottom:5%"></div>
    </div>

</div>

<!--回复、分享按钮-->
<nav class="mui-bar mui-bar-tab mb-bar-tab xw-border-top">
    <input type="text" id="replay-input" class="mb-replay-btn" placeholder="请输入回复内容"><i class="iconfont icon-sousuo"></i>
    <div class="mb-btn-submit">
        <input type="submit" name="submit" value="提交" />
    </div>
    {%if data.likeId%}
    <a href="javascript:void(0);" data-id="{{data.likeId}}" onclick="js_nozan(this)" class="mb-share" style="color:#ff6f3b;"><i class="iconfont"></i>已点赞</a>
    {%else%}
    <a href="javascript:void(0);" onclick="js_zan(this)" class="mb-share"><i class="iconfont icon-zan"></i>点赞</a>
    {%endif%}
</nav>
{% endblock %}

{#js代码#}
{% block js %}
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/like.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#replay-input").focus(function(){
            var parent = $(this).parent();
            parent.addClass("mui-active");
        });
        $("#replay-input").blur(function(){
            var parent = $(this).parent();
            parent.removeClass("mui-active");
        });

        var id = location.search.substr(4);
        mui(".mb-btn-submit").on('tap','input[type="submit"]',function(){
            var cont = $('#replay-input').val();
            if(cont == ''){
                return mui.toast('请填写回复内容');
            }
            mui.post('/postdetail', {
                forumPostId: id,
                content: cont
        },function(data){
            if(data.code!=200){
                mui.toast(data.message);
            }else{
                mui.toast('评论成功');
                window.location.reload();
            }
        },'json');
    });
    });

    function js_button(e){
        let id = $(e).context['dataset']['id'];
        let cid = $(e).context['dataset']['cid'];
        let type = $(e).context['dataset']['type'];
        let msg = '对'+$(e).context['dataset']['name']+'说...';
        mui.prompt('请填写回评',msg,'回评',['关闭','回评'],function(e){
            if(e.index==1){
                if(e.value == ''){
                    return mui.toast('请填写回复内容');
                }
                mui.post('/towreviewsend', {
                    commentPostId:id,
                    repliesTopicObjectId:cid,
                    repliesRoleType:type,
                    content:e.value,
                    sign:'1',
                    },function(data){
                        if(data.code!=200){
                            mui.toast(data.message);
                        }else{
                            mui.toast('回评成功');
                            window.location.reload();
                        }
                    },'json'
                );
            }else{
                console.log('回评结束');
            }
        })
    }

    function js_yes(e){
        var id = $(e).context['dataset']['id'];
        mui.post('/setcollect', {
                type:2,
                domainId:id,
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    $(e).attr({ class: "iconfont icon-yishoucang", onclick: "js_del(this)",style:"color:red;" });
                    $(e).context['dataset']['cid'] = data.data;
                    mui.toast('关注成功');
                }
            },'json'
        );
    }

    function js_del(e){
        var id = $(e).context['dataset']['cid'];
        mui.post('/delcollect', {
                collectionIds:id,
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    $(e).attr({ class: "iconfont icon-shoucang", onclick: "js_yes(this)",style:"color:#999;" });
                    mui.toast('取消关注');
                }
            },'json'
        );
    }

    function js_commentzan(e){
        let url = $(e).context['dataset']['id'];
        let sum = $(e).text();
        mui.post('/clicklike', {
                type:2,
                domainId:url
            },function(data){
                if(data.code!=200){
                    // mui.toast(data.message);
                }else{
                    console.log(data);
                    sum++;
                    $(e).context['dataset']['cid'] = data.data;
                    $(e).html('<i class="iconfont icon-zan"></i>'+sum);
                    $(e).attr({ onclick: "js_commentnozan(this)",style:"color:#ff6f3b;" });
                    // mui.toast('点赞成功!');
                }
            },'json'
        );
    }

    function js_commentnozan(e){
        let url = $(e).context['dataset']['cid'];
        let sum = $(e).text();
        mui.post('/noclicklike', {
                likeId:url
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    sum--;
                    $(e).html('<i class="iconfont icon-zan"></i>'+sum);
                    $(e).attr({ onclick: "js_commentzan(this)",style:"color:#787878;" });
                    mui.toast('取消点赞');
                }
            },'json'
        );
    }



    function js_zan(e){
        let url = (window.location.search).substr(4);
        mui.post('/clicklike', {
            type:1,
            domainId:url
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    $(e).attr({onclick: "js_nozan(this)",style:"color:#ff6f3b;" });
                    $(e).html('已点赞');
                    mui.toast('点赞成功!');
                }
            },'json'
        );
    }

    function js_nozan(e){
        let url = $(e).context['dataset']['id'];
        mui.post('/noclicklike', {
                likeId:url
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    mui.toast('取消点赞');
                }
            },'json'
        );
    }
</script>

<script>
    var page = 2, //分页码
        comturl = location.search.substr(4);//获取当前文章ID
        timers = 1000;
        onoff = true;
        imgUrl = 'http://img-test.zzyuu.com/';
    // 加载数据
    var LoadingData = function() {
        mui.ajax('/postcommentlist',{
            data:{
                id:comturl,
                pageNo:page
            },
            dataType:'json',
            type:'get',
            async:false,
            success:function(data){
                if(data.code!=200){
                    console.log('获取评论失败');
                    mui.toast(data.message);
                }else {
                    if (page > data.data['totalPage']) {
                        onoff = false;
                        return mui.toast('没有更多评论.....');
                    }
                    console.log(page);
                    console.log(data);
                    var commentdata = data.data['list'];
                    console.log(commentdata);
                    //评论盒子内容开始
                    var box = '',
                        commentdiv1 = '<div class="mb-comment-list xw-border-bottom">',
                        commentdiv2 = '<div class="mb-comment-nick mui-clearfix">',
                        commentimg = '<img class="mb-userphoto mui-pull-left" src="',
                        commentdiv3 = '<div class="mb-nick-name mui-pull-left">',
                        commentb = '<b class="mb-nickname mui-ellipsis">',
                        commentp = '<p class="mb-arr-time">',
                        commentdiv4 = '<div class="mb-comment-cont">',
                        commenta = '<a class="mb-replay-more" style="color:#bbb9b9;" ',
                        commenta2 = '<a href="javascript:void(0);" onclick="js_button(this)" ',
                        commentlike = '',commentid = '';

                    for (var i = 0; i < commentdata.length; i++) {
                        if(commentdata[i]['likeId']){
                            commentlike = '<a class="mui-pull-right bbs-zan" style="color:#ff6f3b" href="javascript:void(0);" onclick="js_commentnozan(this)" data-id="';
                            commentid = commentdata[i]["likeId"];
                        }else{
                            commentlike = '<a class="mui-pull-right bbs-zan" href="javascript:void(0);" onclick="js_commentzan(this)" data-id="';
                            commentid = commentdata[i]["id"];
                        }
                        if (commentdata[i]['topicCount'] != 0) {
                            box += commentdiv1 + commentdiv2 + commentimg + imgUrl + commentdata[i]['headImgUrl']
                                + '"/>' + commentdiv3 + commentb + commentdata[i]['name'] + '</b>'
                                + commentp + commentdata[i]['createDate'] + '</p></div>'
                                + commentlike + commentid +'" data-cid=' + commentdata[i]['likeId']+'><i class="iconfont icon-zan"></i>'+commentdata[i]['postLikeCount']+'</a></div>'
                                + commentdiv4 + commenta2 + 'data-id=' + commentdata[i]['id'] + ' data-name=' + commentdata[i]['name']
                                + ' data-cid=' + commentdata[i]['commentPersonId'] + '>'
                                +commentdata[i]['content'] + '</a>' + commenta + 'href="postreplaylist?id='+commentdata[i]['id']
                                + '"> 查看' + commentdata[i]['topicCount'] + '条回复'
                                + '</a></div></div>';
                        } else {
                            box += commentdiv1 + commentdiv2 + commentimg + imgUrl + commentdata[i]['headImgUrl']
                                + '"/>' + commentdiv3 + commentb + commentdata[i]['name'] + '</b>'
                                + commentp + commentdata[i]['createDate'] + '</p></div>'
                                + commentlike + commentid +'" data-cid=' + commentdata[i]['likeId']+'><i class="iconfont icon-zan"></i>'+commentdata[i]['postLikeCount']+'</a></div>'
                                + commentdiv4 + commenta2 + 'data-id=' + commentdata[i]['id'] + ' data-name=' + commentdata[i]['name']
                                + ' data-cid=' + commentdata[i]['commentPersonId'] + '>'
                                +commentdata[i]['content']+'</a></div></div>';
                        }
                        //创建盒子
                    }
                    var commentbox = $('#list_box');
                    commentbox.append(box);
                    if (page == data.data['totalPage']) {
                        onoff = false;
                        return mui.toast('没有更多评论.....');
                    }
                    page++;
                    }
                }
            }
        );
    };

    $(document).scroll(function() {
        //console.log($(document).scrollTop());

        if($(document).scrollTop()>=$(document).height()-$(window).height()-150){
            if(onoff) {
                clearTimeout(timers);
                timers = setTimeout(function () {
                    LoadingData();
                }, 300);
            }
        }
    });
</script>

<!--flotdemo-->
{% endblock %}
